<template>
  <div class="find" id="find">
    <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="mescrollInit">
    <div class="heaer fixedTop">发现频道</div>
    <div class="findIndex">
      <div class="item" v-for="item in findIndex" :key="item.id">
        <img :src="'../../../../static/images/' + item.imgName" />
        <div>{{item.name}}</div>
      </div>
    </div>
    <div class="heaer">
      商城头条
      <div class="declaraction">声明</div>
    </div>
    <!-- 商城头条 -->
    <div class="findCategoryList">
      <div class="item" v-for="item in headlinesTypeList" :key="item.id">
        <img :src="'https://res.vmallres.com/pimages' + item.iconUrl" />
      </div>
    </div>
    <!-- 发现更多商城头条 -->
    <div class="findNewsList">
      <div class="item" v-for="(item,index) in findNewsList" :key="item.id" v-show="index <= 3">
        <img class="mainImg" :src="'https://res.vmallres.com/pimages' + item.thumbnail" />
        <div class="title">{{item.title}}</div>
        <div class="summary">{{item.summary}}</div>
        <div class="other">
          <span class="publishTime">{{ item.publishTime | moment }}</span>
          <span class="viewAmount">{{item.viewAmount}}<span>阅读</span></span>
        </div>
      </div>
      <div class="moreFooter">
        <span class="more">发现更多商城头条</span>
        <span class="icon"></span>
      </div>
    </div>
    <div class="specLine"></div>
    <!-- 新摄汇 -->
    <div class="findList" v-if="findList.length > 0">
      <div class="topLine">
        <div class="left">
          <div class="imgArae">
            <img :src="'https://res.vmallres.com/pimages' + findList[0].thumbnail" />
            <div><span>来自</span>{{findList[0].newstypeName}}</div>
          </div>
        </div>
        <div class="right">
          <div class="imgArae">
            <img :src="'https://res.vmallres.com/pimages' + findList[1].thumbnail" />
            <div><span>来自</span>{{findList[1].newstypeName}}</div>
          </div>
          <div class="imgArae">
            <img :src="'https://res.vmallres.com/pimages' + findList[2].thumbnail" />
            <div><span>来自</span>{{findList[2].newstypeName}}</div>
          </div>
        </div>
      </div>
      <div class="bottomLine">
        <div class="left">
          <div class="imgArae">
            <img :src="'https://res.vmallres.com/pimages' + findList[3].thumbnail" />
            <div><span>来自</span>{{findList[3].newstypeName}}</div>
          </div>
        </div>
        <div class="right">
          <div class="imgArae">
            <img :src="'https://res.vmallres.com/pimages' + findList[4].thumbnail" />
            <div><span>来自</span>{{findList[4].newstypeName}}</div>
          </div>
        </div>
      </div>
      <div class="moreFooter">
        <span class="more">发现更多新摄汇</span>
        <span class="icon"></span>
      </div>
    </div>
    <div class="specLine"></div>
    <!-- 口碑好货 -->
    <div class="findNewsList koubeiList">
      <div class="heaer">口碑好货</div>
      <div class="item" v-for="item in koubeiList" :key="item.id">
        <img class="mainImg" :src="'https://res.vmallres.com/pimages' + item.thumbnail" />
        <div class="praise">
          <img src="../../../../static/images/praise.png" />
          <div>99+</div>
        </div>
        <div class="title">{{item.title}}</div>
        <div class="summary">{{item.summary}}</div>
        <div class="other">
          <span class="publishTime">{{ item.publishTime | moment }}</span>
          <span class="viewAmount"><span>来自</span>{{item.recommenderName}}<span>的推荐</span></span>
        </div>
      </div>
    </div>
    </mescroll-vue>
    <Tarbar :activeIndex=2></Tarbar>
  </div>
</template>

<script>
import Tarbar from '../../common/tarbar'
import MescrollVue from 'mescroll.js/mescroll.vue'
export default {
  name: 'find',
  components: {
    Tarbar,
    MescrollVue
  },
  data () {
    return {
      findIndex: [
        {
          id: 1,
          name: '商城公告',
          imgName: 'icon_headline.png'
        },
        {
          id: 2,
          name: '选品试用',
          imgName: 'icon_shiyong.png'
        },
        {
          id: 3,
          name: '直播预告',
          imgName: 'icon_zhibo.png'
        },
        {
          id: 4,
          name: '粉丝互动',
          imgName: 'icon_fans.png'
        },
        {
          id: 5,
          name: '直播互动',
          imgName: 'icon_public_surver.png'
        }
      ], // 频道入口
      headlinesTypeList: [], // 商城头条
      findNewsList: [], // 发现更多商城头条
      findList: [], // 发现更多新摄汇
      koubeiList: [], // 口碑好货
      pageNum: 1, // 其实页码数  最大是4
      mescroll: null, // mescroll实例对象
      mescrollDown:{
        use: false // 关闭下拉刷新
      }, //下拉刷新的配置. (如果下拉刷新和上拉加载处理的逻辑是一样的,则mescrollDown可不用写了)
      mescrollUp: { // 上拉加载的配置.
        callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
        htmlLoading: '<div><img style="width: 50px; heigth: 50px;" src="../../../../static/images/loading.gif" /></div>',
        htmlNodata: '<p class="upwarp-nodata">暂无更多数据</p>',
        toTop: { 
          warpId : 'find' , 
          src : '../../../../static/images/button-top.png' , 
          html: null , 
          offset : 100 , 
          warpClass : "mescroll-totop" , 
          showClass : "mescroll-fade-in" , 
          hideClass : "mescroll-fade-out" , 
          duration : 300 , 
          supportTap : false,
          btnClick : null 
        }
      }
    }
  },
  beforeRouteEnter (to, from, next) { // 如果没有配置顶部按钮或isBounce,则beforeRouteEnter不用写
    next(vm => {
      // 滚动到原来的列表位置,恢复顶部按钮和isBounce的配置
      vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter()
    })
  },
  beforeRouteLeave (to, from, next) { // 如果没有配置顶部按钮或isBounce,则beforeRouteLeave不用写
    // 记录列表滚动的位置,隐藏顶部按钮和isBounce的配置
    this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave()
    next()
  },
  methods: {
    // 商品头条数据
    async getHeadlinesTypeList() {
      let data = await this.$http.get('../../../../static/mock/queryHeadlinesTypeList.json')
      this.headlinesTypeList = data.headlinesTypeList;
    },
    // 发现更多商城头条
    async getFindNewsList() {
      let data = await this.$http.get('../../../../static/mock/queryContentList1.json')
      this.findNewsList = data.contentDetailList;
    },
    // 发现更多新摄汇
    async getFindList() {
      let data = await this.$http.get('../../../../static/mock/queryContentList2.json')
      this.findList = data.contentDetailList;
    },
    // 口碑好货
    async getKoubeiList() {
      let data = await this.$http.get('../../../../static/mock/queryContentList3' + this.pageNum + '.json')
      this.koubeiList = data.contentDetailList;
    },
    mescrollInit (mescroll) {
      this.mescroll = mescroll  // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    upCallback (page, mescroll) {
      if (this.koubeiList.length > 0) {
        this.pageNum = this.pageNum + 1;
        if (this.pageNum > 4) {
          mescroll.endByPage(10, 4);
          return;
        }
      }
      this.$http.get('../../../../static/mock/queryContentList3' + this.pageNum + '.json').then((response) => {
        // 请求的列表数据
        let arr = response.contentDetailList;
        // 把请求到的数据添加到列表
        this.koubeiList = this.koubeiList.concat(arr);
        // 数据渲染成功后,隐藏下拉刷新的状态
        this.$nextTick(() => {
          mescroll.endSuccess(arr.length);
        })
      }).catch((e) => {
        // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
        mescroll.endErr();
      })
    }
  },
  mounted () {
    this.getHeadlinesTypeList();
    this.getFindNewsList();
    this.getFindList();
    // this.getKoubeiList();
  }
}
</script>

<style scoped lang="scss">
.find{
  margin-bottom: 110px;
  .heaer{
    color: #191919;
    font-size: 36px;
    height: 82px;
    line-height: 82px;
    position: relative;
    .declaraction{
      position: absolute;
      right: 32px;
      top: 0px;
      color: #999999;
      font-size: 24px;
      padding-right: 36px;
      background-image: url(../../../../static/images/declaraction.png);
      background-position: right center;
      background-repeat: no-repeat;
      background-size: 26px 26px;
    }
  }
  .fixedTop{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background-color: white;
    z-index: 100;
  }
  .findIndex{
    margin-top: 82px;
    padding: 40px 32px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    .item{
      width: 136px;
      text-align: center;
      img{
        width: 82px;
        height: 82px;
      }
      div{
        color: #9b9b9b;
        font-size: 24px;
      }
    }
  }
  .findCategoryList{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
    &::-webkit-scrollbar{
      display: none;
    }
    .item{
      padding-left: 10px;
      img{
        width: 186px;
        height: 104px;
      }
    }
  }
  .specLine{
    background-color: #f9f9f9;
    width: 100%;
    height: 20px;
  }
  .findNewsList{
    padding: 0 10px;
    .item{
      text-align: left;
      padding-bottom: 30px;
      .mainImg{
        width: 730px;
        height: 306px;
        border-radius: 16px;
      }
      .title{
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-size: 30px;
        padding: 6px 10px;
      }
      .summary{
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-size: 28px;
        padding: 6px 10px;
      }
      .other{
        padding: 10px;
        color: #999999;
        font-size: 24px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: nowrap;
        .viewAmount{
          span{
            margin-left: 6px;
          }
        }
      }
    }
  }
  .moreFooter{
    height: 90px;
    line-height: 90px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    align-content: center;
    span{
      display: flex;
    }
    .more{
      color: #4a4a4a;
      font-size: 30px;
    }
    .icon{
      width: 22px;
      background-image: url(../../../../static/images/arrow_right.png);
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 16px 24px;
    }
  }
  .findList{
    padding: 12px 0;
    margin: 0 12px;
    .topLine{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: nowrap;
      .left{
        .imgArae{
          img{
            width: 450px;
            height: 386px;
            border-top-left-radius: 16px;
          }
        }
      }
      .right{
        .imgArae{
          img{
            width: 270px;
            height: 190px;
            border-top-right-radius: 16px;
          }
        }
      }
    }
    .bottomLine{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: nowrap;
      margin-top: -4px;
      .left{
        .imgArae{
          img{
            width: 270px;
            height: 190px;
            border-bottom-left-radius: 16px;
          }
        }
      }
      .right{
        .imgArae{
          img{
            width: 450px;
            height: 190px;
            border-top-right-radius: 16px;
          }
        }
      }
    }
    .imgArae{
      position: relative;
      div{
        position: absolute;
        left: 16px;
        bottom: 16px;
        right: 16px;
        font-size: 24px;
        color: #ffffff;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
        text-align: left;
        span{
          margin-right: 6px;
        }
      }
    }
  }
  .koubeiList{
    .item{
      text-align: left;
      padding-bottom: 30px;
      position: relative;
      .praise{
        position: absolute;
        z-index: 100;
        right: 20px;
        top: 250px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 24px;
        height: 40px;
        border-radius: 20px;
        padding: 0 16px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: nowrap;
        img{
          width: 50px;
          height: 50px;
          margin-right: 6px;
          margin-top: -5px;
        }
        div{
          line-height: 46px;
        }
      }
      .mainImg{
        width: 730px;
        height: 306px;
        border-radius: 16px;
      }
      .title{
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        font-size: 30px;
        padding: 6px 10px;
      }
      .summary{
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 28px;
        padding: 6px 10px;
      }
    }
  }
}
</style>
